<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>周游券</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		body,.mui-content {
			background: #fff;
		}
		.mui-bar .mui-icon {
			color: #666;
		}
		.mui-title {
			color: #666;
		}
		.list-ul {
			margin-top: 10px;
			display: flex;
			flex-direction: column;
		}
		.list-li {
			padding: 0 10px;
			margin-bottom: 17px;
		}
		.list-body {
			position: relative;
			height: 125px;
			display: flex;
			flex-direction: row;
			border-radius: 5px;
			box-shadow:0px 1px 10px 0px rgba(91,169,249,0.57);
		}
		.list-img {
			border-radius: 5px 0 0 5px;
			width: 160px;
			height: 125px;
		}
		.list-content {
			padding: 15px 10px 0 7px;
		}
		.content-title {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333;
		}
		.content-score {
			margin-top: 10px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #53A5F9;
		}
		.content-price {
			margin-top: 5px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FD5C5C;
		}
		.tap-address {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 56px;
			height: 18px;
			background:rgba(27,27,27,0.6);
			font-size: 10px;
			text-align: center;
			color: #fff;
			line-height: 18px;
			border-radius:0px 8px 0px 5px;
		}
		.tap-address img {
			vertical-align: middle;
			width: 10px;
			height: 13px;
		}
		.tap-address span {
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title">周游券列表</h1>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	</header>
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<div class="list-ul">
				
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var customerId = base.getParameter("customerId");
//		$(function() {
//			getTravelVouchersList();
//		});
		var pageData = {
			pageNo: 0,
			refresh: 'down'
		}
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					style:'circle',
					callback: pulldownRefresh
				},
				up: {
					auto:true,
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		//下拉刷新
		function pulldownRefresh() {
			pageData.pageNo = 1;
			pageData.refresh = 'down';
			getTravelVouchersList();
		};	
		//上拉加载
		function pullupRefresh() {
			pageData.pageNo ++;
			pageData.refresh = 'up';
			getTravelVouchersList();
		};
		function getTravelVouchersList() {
			base.postData(base.url.getTravelVouchersList, {pageNo: pageData.pageNo}, function(data) {
				if (data.success) {
					var html = '';
					for (var i=0; i<data.extendData.travelVouchersList.length; i++) {
						html += pingTravelVouchersList(data.extendData.travelVouchersList[i]);
					}
					if (pageData.refresh == 'down') {
						$(".list-ul").html(html);	
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					}else {
						$(".list-ul").append(html);
						if (data.extendData.travelVouchersList.length < 20) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						}else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						}
					}
				} else {
					mui.toast(data.message);
				}
			});	
		}
		function pingTravelVouchersList(data) {
			var html = '<div class="list-li">'+
						'	<input type="hidden" name="travelVouchersId" value="'+data.travelVouchersId+'" />'+
						'	<div class="list-body">'+
						'		<div class="list-left-img">'+
						'			<img class="list-img" src="'+data.imgUrl+'" />'+
						'		</div>'+
						'		<div class="list-content">'+
						'			<div class="content-title mui-ellipsis-2">'+data.travelVouchersName+'</div>'+
						'			<div class="content-score">'+(data.avgStars==0?"暂未评分":data.avgStars+"分")+'</div>'+
						'			<div class="content-price">¥ '+data.price+'</div>'+
						'		</div>'+
						'		<div class="tap-address">'+
						'			<img src="../img/homePage/tap-address.png" />'+
			        	'			<span>'+data.cityName+'</span>'+
						'		</div>'+
						'	</div>'+
						'</div>';
			return html;
		}
		$(".list-ul").on('tap', ".list-li", function() {
			var travelVouchersId = $(this).find("input[name='travelVouchersId']").val();
			window.location.href = "travelTicketInfo.html?travelVouchersId="+travelVouchersId+"&customerId="+customerId;
		});
	</script>
</body>
</html>
